<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <link rel="shortcut icon" href="./images/icon.png" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>东明家居集团-东明课堂系统</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/iview.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container-fluid" id="app">
     <!-- breadcrumb -->
      <template class="page-header">
          <breadcrumb class="pull-left">
              <breadcrumb-item to="welcome.html" >首页</breadcrumb-item>
              <breadcrumb-item>分类管理</breadcrumb-item>
          </breadcrumb>
      </template>
      <!-- 搜索条件 -->
      <div class="table-margin">
          <row span="24"> 
               <i-col span="5" offset="2" style="margin-top: 60px;"> 
                   <tree :data="data1"></tree>
               </i-col>
               <i-col span="8" offset="1" class="mt20" >
                     <i-form :model="formItem" label-position="right" :label-width="80">
                            <row>
                                <i-col class="mb20">
                                    <Form-item label="选择分类：" >
                                          <i-select v-model="formItem.model1" placeholder="选择分类" style="width: 300px">
                                                  <i-option value="outside">视频</i-option>
                                                  <i-option value="inside">音频</i-option>
                                                  <i-option value="inside">电子书</i-option>
                                          </i-select> 
                                    </Form-item>
                                </i-col>  
                                <i-col class="mb20">
                                    <Form-item label="父级分类：" >
                                          <i-input v-model="formItem.value" placeholder="父级分类名称" style="width: 300px" disabled ></i-input>
                                    </Form-item>
                                </i-col>                                                        
                                <i-col class="mb20">
                                    <Form-item label="分类名称：" >
                                          <i-input v-model="formItem.value" placeholder="请输入分类名称" style="width: 300px"></i-input>
                                    </Form-item>
                                </i-col>                                                                      
                           </row>
                           <row>
                                <i-col>
                                    <i-button type="primary" class="mr10" style="margin-left: 80px;">保存</i-button><i-button>取消</i-button> 
                                </i-col>
                           </row>                      

                     </i-form>
               </i-col>
          </row>
      </div>
</div>
</body>
<script src="js/vue.js"></script>
<script src="js/iview.min.js"></script>
<script>
    var Main = {
        data () {
            return {
                formItem: {
                    input: '',
                    select: '',
                },      
                value:'',
                data1: [
                    {
                        title: '分类管理',
                        render:(h,params) =>{
                            return h('Dropdown',
                                 {
                                    props: {
                                      trigger:'click',
                                      placement: 'right-start',
                                    }
                                 },
                                 [
                                    h('Button',{
                                        props: {
                                          type:'text',
                                        }
                                    }, '一级分类'),
                                    h('DropdownMenu',{
                                        slot:'list',
                                        style:{
                                            padding:'0'
                                        }
                                    },[
                                      h('DropdownItem',{
                                        style:{
                                           padding:' 7px 16px',
                                           margin: '0'
                                        }
                                      },'添加子集'),
                                      h('DropdownItem',{
                                        style:{
                                           padding:' 7px 16px',
                                           margin: '0'
                                        }
                                      },'修改'),
                                      h('DropdownItem',{
                                        style:{
                                           padding:' 7px 16px',
                                           margin: '0'
                                        }
                                      },'删除')
                                    ])
                                 ])
                        },                         
                        expand: true,
                        children: [
                            {
                                title: '二级分类',
                                render:(h,params) =>{
                                    return h('Dropdown',
                                         {
                                            props: {
                                              trigger:'click',
                                              placement: 'right-start',
                                            }
                                         },
                                         [
                                            h('Button',{
                                                props: {
                                                  type:'text',
                                                }
                                            }, '二级分类'),
                                            h('DropdownMenu',{
                                                slot:'list',
                                                style:{
                                                    padding:'0'
                                                }
                                            },[
                                              h('DropdownItem',{
                                                style:{
                                                   padding:' 7px 16px',
                                                   margin: '0'
                                                }
                                              },'添加子集'),
                                              h('DropdownItem',{
                                                style:{
                                                   padding:' 7px 16px',
                                                   margin: '0'
                                                }
                                              },'修改'),
                                              h('DropdownItem',{
                                                style:{
                                                   padding:' 7px 16px',
                                                   margin: '0'
                                                }
                                              },'删除')
                                            ])
                                         ])
                                },                                
                                expand: true,
                                children: [
                                    {
                                        title: '三级分类1',
                                        render:(h,params) =>{
                                            return h('Dropdown',
                                                 {
                                                    props: {
                                                      trigger:'click',
                                                      placement: 'right-start',
                                                    }
                                                 },
                                                 [
                                                    h('Button',{
                                                        props: {
                                                          type:'text',
                                                        }                                                        
                                                    }, '三级分类1'),
                                                    h('DropdownMenu',{
                                                        slot:'list',
                                                        style:{
                                                            padding:'0'
                                                        }
                                                    },[
                                                      h('DropdownItem',{
                                                        style:{
                                                           padding:' 7px 16px',
                                                           margin: '0'
                                                        }
                                                      },'添加子集'),
                                                      h('DropdownItem',{
                                                        style:{
                                                           padding:' 7px 16px',
                                                           margin: '0'
                                                        }
                                                      },'修改'),
                                                      h('DropdownItem',{
                                                        style:{
                                                           padding:' 7px 16px',
                                                           margin: '0'
                                                        }
                                                      },'删除')
                                                    ])
                                                 ])
                                            }                                        
                                    },
                                    {
                                        title: '三级分类2',
                                        render:(h,params) =>{
                                            return h('Dropdown',
                                                 {
                                                    props: {
                                                      trigger:'click',
                                                      placement: 'right-start',
                                                    }
                                                 },
                                                 [
                                                    h('Button', {
                                                        props: {
                                                          type:'text',
                                                        }                                                          
                                                    },'三级分类2'),
                                                    h('DropdownMenu',{
                                                        slot:'list',
                                                        style:{
                                                            padding:'0'
                                                        }
                                                    },[
                                                      h('DropdownItem',{
                                                        style:{
                                                           padding:' 7px 16px',
                                                           margin: '0'
                                                        }
                                                      },'添加子集'),
                                                      h('DropdownItem',{
                                                        style:{
                                                           padding:' 7px 16px',
                                                           margin: '0'
                                                        }
                                                      },'修改'),
                                                      h('DropdownItem',{
                                                        style:{
                                                           padding:' 7px 16px',
                                                           margin: '0'
                                                        }
                                                      },'删除')
                                                    ])
                                                 ])
                                            }
                                    }
                                ],
                            },

                        ]
                    }
                ],

            }
        },
        // methods: {
        //     addClass(){
        //         $('.ivu-dropdown-rel span:first-child:visited').css({
        //             background : '#d5e8fc',
          
        //         });
        //     }
        // }
    }
    var Component = Vue.extend(Main)
    new Component().$mount('#app') 
</script>
</html>